<template>
  <div>
    <van-search
      show-action
      v-model="value"
      right-icon=""
      background="rgba(0,0,0,0)"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          size="0.7rem"
          color="#fff"
          style="text-align: center"
        />
      </template>
      <template #action>
        <van-icon
          name="map-marked"
          size="0.7rem"
          color="#fff"
          style="line-height=54.8px"
        />
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in LunBoList" :key="item.id">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item icon="wap-home-o" color="red" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="logistics" text="去出租" />
    </van-grid>
    <van-cell-group>
  <van-cell title="租房小组" value="更多" />
</van-cell-group>
<van-grid direction="horizontal" :column-num="2" >

<van-grid-item v-for="item in ZuFangxzList" :key="item.id">
  <img id="img" slot="icon" :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
  <span id="span" slot="text" v-html="item.desc+'<br>' +item.title"></span>
  </van-grid-item>
</van-grid>
  </div>
</template>

<script>
import { LunBoApi, ZuFangxzApi } from '@/api'
export default {
  data () {
    return {
      value: '',
      LunBoList: [],
      ZuFangxzList: []
    }
  },
  async created () {
    const res = await LunBoApi()
    console.log(res)
    this.LunBoList = res.data.body
    console.log(this.LunBoList)
    const res1 = await ZuFangxzApi({ area: '北京' })
    console.log(res1)
    this.ZuFangxzList = res1.data.body
    console.log(this.ZuFangxzList)
  }
}
</script>

<style lang="less" scoped>
.van-icon-map-marked:before {
  margin-top: 5px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  width: 100%;
  height: 5rem;
  font-size: 20px;

  text-align: center;
  background-color: #39a9ed;
}
.my-swipe .van-swipe-item img {
  width: 100%;
}
.van-search {
  position: fixed;
  top: 0;
  left: -14%;
  z-index: 10000000;
  transform: translate(14%);
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}
/deep/ .van-icon-wap-home-o:before {
  font-size: 1rem;
  color: #09b16c;
}
/deep/ .van-icon-logistics:before {
  font-size: 1rem;
  color: #09b16c;
}
/deep/ .van-icon-location-o:before {
  font-size: 1rem;
  color: #09b16c;
}
/deep/ .van-icon-friends-o:before {
  font-size: 1rem;
  color: #09b16c;
}
.van-grid-item__icon-wrapper #img{
  font-size: 1rem;
  width: 60px;
  height: 60px;
}
.van-grid-item__content #span{
font-size: 14px;
}
</style>>
